import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer } from "mobx-react";
import {
  Form, Input, Button, Checkbox, message
} from 'antd';
import PropTypes from 'prop-types';
import { setCookie } from '../../common/cookies';
import http from '../../common/http';
import './Login.less';

@observer
class Login extends Component {
  @observable verificationCode = '0000';
  @observable notExit = false;

  componentDidMount() {
    this.toGetSmsCode();
  }

  toGetSmsCode = () => {
    http.get('/user/getSmsCode')
    .then((response) => {
      this.verificationCode = response.data;
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const param = {
          accountNo: values.userName,
          imgCode: values.code,
          pwd: values.password
        }
        http.loginPost('/user/login', param)
        .then((response) => {
          if (response.success) {
            const { history } = this.props;
            setCookie('TOKEN', response.data)
            history.push('/')
          } else {
            switch (response.message) {
              case "账号不存在":
                this.notExit = true
                break;
              case "验证码已失效，请重新获取":
                this.toGetSmsCode()
                message.error(response.message)
                break;
              default:
            }
          }
        })
      }
    });
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-content">
        {/* <div className="login"></div> */}
        <div className="login-bg">
          <div className="logn-cms">
            <div className="logo">
              <div>LOONGPAY CMS</div>
            </div>
            <Form onSubmit={this.handleSubmit} className="login-form">
              <Form.Item>
                {getFieldDecorator('userName', {
                  rules: [
                    { required: true, message: 'Please input your username!' },
                    { required: this.notExit, message: 'userName not exits' }
                  ],
                })(
                  <Input placeholder="Username" />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: 'Please input your Password!' }],
                })(
                  <Input type="password" placeholder="Password" />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('code', {
                  rules: [{ required: true, message: 'Please input your Code!' }],
                })(
                  <div>
                    <Input suffix={<span>{this.verificationCode}</span>} placeholder="Code" />
                  </div>
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('remember', {
                  valuePropName: 'checked',
                  initialValue: true,
                })(
                  <Checkbox>Remember me</Checkbox>
                )}
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button">
                  Log in
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>

    )
  }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);

export default WrappedNormalLoginForm;
